<template>
    <view class="content">
        <view class="base_info" id="top">
            <view class="base_header">
                <view class="base_header_img">
                    <image src="../../static/me.jpg" mode="aspectFit" class="header_img"></image>
                    <view style="padding: 10upx 0upx 10upx 40upx; flex: 1;">
                        <view style="font-size: 120%; font-weight: bold; line-height: 1.4em;">{{info.base.name}} </view>
                        <view style="font-size: 90%;">{{info.base.work_want}}</view>
                    </view>
                </view>
                <view class="table_txt">
                    <text>{{info.base.sex}}</text>
                    <text>{{info.base.birthday}}</text>
                    <text>{{info.base.school}}</text>
                </view>
                <view class="table_txt">
                    <text>{{info.base.workage}}工作经验</text>
                    <text>{{info.base.location}}</text>
                </view>
            </view>
            <view class="base_footer">
                <view>
                    <icon type="search" size="12" color="blue" style="padding-right: 10upx;"> </icon><text>已离职，求推荐工作</text>
                </view>
                <view>全职</view>
            </view>
        </view>
        <SInfo title="基本信息" :infoMap="baseInfo()"></SInfo>
        <SInfo title="教育经历" :infoMap="eduInfo()"></SInfo>
        <view style="height: 10upx;"></view>
        <RInfo title="工作经历" :infoArr="info.works"></RInfo>
        <PInfo title="项目经历" :infoArr="info.prjs" id="prjs"></PInfo>
        <SInfo title="证书与奖项" :infoMap="awardInfo()"></SInfo>
        <SInfo title="相关链接" :infoMap="linkInfo()" id="other"></SInfo>
    </view>
</template>

<script>
    import {
        bak
    } from '../../bak.js';
    import SInfo from '../comm/sinfo.vue';
    import RInfo from '../comm/rinfo.vue';
    import PInfo from '../comm/pinfo.vue';
    export default {
        data() {
            return {
                info: bak.info,
            };
        },
        components: {
            SInfo: SInfo,
            RInfo: RInfo,
            PInfo: PInfo,
        },
        onLoad: function(obj) {
            let pos = obj.pos;
            uni.createSelectorQuery().select('#' + pos).boundingClientRect(function(e) {
                console.log(e)
                uni.pageScrollTo({
                    scrollTop: e.top,
                    duration: 600
                });
            }).exec();

            uni.showShareMenu({
                withShareTicket: true,
            })
        },
        methods: {
            baseInfo: function() {
                // console.log(bak);
                let info2 = new Map();
                info2["状态"] = this.info.base.state;
                info2["电话"] = this.info.base.phone;
                info2["邮箱"] = this.info.base.email;
                info2["期望薪资"] = this.info.base.work_salary_want;
                info2["英语"] = this.info.base.english_level;
                info2["技能"] = this.info.base.lang_skill;
                return info2;
            },
            eduInfo: function() {
                let info2 = new Map();
                info2["学校"] = this.info.education[0].school;
                info2["专业"] = this.info.education[0].major;
                info2["学历"] = this.info.education[0].level;
                info2["时间"] = this.info.education[0].time;
                return info2;
            },
            awardInfo: function() {
                let info2 = new Map();
                for (let i = 0; i < this.info.awards.length; i++) {
                    let one = this.info.awards[i];
                    info2[one.name] = one.time;
                }
                return info2;
            },
            linkInfo: function() {
                let info2 = new Map();
                for (let i = 0; i < this.info.links.length; i++) {
                    let one = this.info.links[i];
                    info2[one.name] = one.url;
                }
                return info2;
            }
        }
    }
</script>

<style lang="scss">
    .content {
        padding: 40upx;
        font-size: 90%;
        background-color: #F9F7FA;
    }

    .base_info {
        border: 1px solid lightgray;
        background-color: #FEFEFE;
        box-shadow: 0upx 10upx 50upx 10upx rgba(85, 85, 85, 0.10);
        border-radius: 6upx;
        margin-bottom: 20upx;
    }

    .base_header {
        margin: 30upx 70upx;
        display: flex;
        flex-direction: column;
    }

    .base_header_img {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 10upx;
    }

    .base_footer {
        padding: 15upx 20upx;
        background-color: #EFEDF0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .header_img {
        width: 100upx;
        height: 100upx;
        border-radius: 50upx;
        border: 1px solid lightgray;
        background-color: lightgray;
    }

    .table_txt {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: gray;
        padding: 8upx 0upx;
    }
</style>
